<template>
  <view class="container">
    <!-- 第一部分：订单信息 -->
    <view class="section">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text>订单号：{{ orderData.orderId }}</text>
        <text class="status">已完成</text>
      </view>
      <view class="info-item">
        <text>服务项目：{{ orderData.serviceName}}</text>
      </view>
      <view class="info-item">
        <text>下单时间：{{ formatTime(orderData.orderTime) }}</text>
      </view>
      <view class="info-item">
        <text>预约时间：{{ formatTime(orderData.appointmentTime) }}</text>
      </view>
      <view class="info-item">
        <text>车辆：</text>
      </view>
      <view class="info-item">
        <text>备注：{{orderData.remark}}</text>
      </view>
    </view>

    <!-- 第二部分：订单详情 -->
    <view class="section">
      <view class="section-title">订单详情</view>
      <view class="detail-item">
        <text>车辆精洗</text>
        <text class="price">￥{{ orderData.servicePrice}}</text>
      </view>
      <view class="detail-item">
        <text>车辆附加费用</text>
        <text class="price">￥50.00</text>
      </view>
      <view class="detail-item total">
        <text>原价</text>
        <text class="price">￥{{ orderData.totalAmount}}</text>
      </view>
      <view class="detail-item discount">
        <text>优惠</text>
        <text class="price">-￥20.00</text>
      </view>
      <view class="detail-item">
        <text>支付金额</text>
        <text class="price">￥{{ orderData.actualAmount}}</text>
      </view>
    </view>

    <!-- 第三部分：评价结果 -->
    <view class="section">
      <view class="section-title">评价结果</view>
      <view class="info-item">
        <text>评价时间：{{formatTime(reviewData.reviewTime)}}</text>
      </view>
      <view class="rating-item">
        <text>评价结果：</text>
        <uni-rate
          :value="reviewData.rating"
          :max="5"
          :size="18"
          color="#bbb"
          active-color="#FFC107"
          :readonly="true"
          :is-fill="true"
        />
      </view>
      <view class="comment-item">
        <text>评语：{{reviewData.content}}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs'; // 引入 dayjs

// 接收订单号参数
const orderNumber = ref('');
// 订单数据
const orderData = ref({});
// 评价数据
const reviewData = ref({});
// 使用 dayjs 格式化时间
const formatTime = (isoTime) => {
  return dayjs(isoTime).format('YYYY-MM-DD HH:mm');
};


// 接收传递的数据
onMounted(() => {
  // 获取当前页面实例
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  // 解析 URL 参数中的 orderData 和 reviewData
  const orderDataStr = decodeURIComponent(options.orderData || '{}');
  const reviewDataStr = decodeURIComponent(options.reviewData || '{}');

  // 将 JSON 字符串转换为对象
  orderData.value = JSON.parse(orderDataStr);
  reviewData.value = JSON.parse(reviewDataStr);

  // 打印传递过来的数据
  console.log('接收到的订单数据:', orderData.value);
  console.log('接收到的评价数据:', reviewData.value);
});
</script>

<style scoped>
.container {
  padding: 20px;
}

.section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.status {
  color: #FF0000;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.price {
  font-weight: bold;
}

.total {
  border-top: 1px solid #E0E0E0;
  padding-top: 10px;
}

.discount .price {
  color: #FF0000;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.comment-item {
  font-size: 14px;
}
</style>